<template>
  <div>
    <!--未登录时-->
    <div v-if="getToken === ''">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row type="flex" :gutter="0">
            <span><i class="el-icon-user"></i>用户信息</span>
          </el-row>
          <el-row>
            <el-divider></el-divider>
          </el-row>
          <el-row type="flex" :gutter="0" justify="center" align="middle">
            <el-col :span="4">
              <el-avatar icon="el-icon-user-solid"></el-avatar>
            </el-col>
            <el-col :span="8"><span>未登录</span></el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="12" justify="center" align="middle"
              ><router-link to="/login"
                ><el-button round>登录</el-button></router-link
              ></el-col
            >
            <el-col :span="12" justify="center" align="middle"
              ><router-link to="/register"
                ><el-button round>注册</el-button></router-link
              ></el-col
            >
          </el-row>
        </div>
      </el-card>
    </div>
    <!--已登录时-->
    <div v-else>
      <el-card class="box-card">
        <div slot="header" class="box-card">
          <el-row type="flex" :gutter="0">
            <span><i class="el-icon-user"></i>用户信息</span>
          </el-row>
          <el-row>
            <el-divider></el-divider>
          </el-row>
          <el-row type="flex" :gutter="20">
            <el-col :span="6">
              <el-avatar
                :src="info.head_img"
              ></el-avatar
            ></el-col>
            <el-col :span="8">
              <p>{{ info.name }}</p>
            </el-col>
            <el-col :span="4">
              <el-badge :value="10" class="item">
                <el-button type="primary" plain icon="el-icon-message"
                  ></el-button
                >
              </el-badge>
            </el-col>
            <el-col :span="4">
                <el-button plain>个人中心</el-button
                >
            </el-col>
          </el-row>
        </div>
        <div align="right"><el-link type="info" @click="signOut">登出</el-link></div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
  computed: {
    getToken() {
      return this.$store.state.token;
    },
  },
  methods: {
        async signOut() {
      try {
        await this.$store.dispatch("clearToken");
        localStorage.removeItem("token");

        location.reload();
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style>
.boxcard {
  width: 100%;
}

</style>